<template>
	<div class="app-container">
		
		<item-view/>
		
		<el-row :gutter="20">
		  <el-col :span="8">
		    <el-carousel indicator-position="outside">
		      <el-carousel-item>
				<base-count-view/>
		      </el-carousel-item>
			  <el-carousel-item>
			  	<product-clazz-view/>
			  </el-carousel-item>
		    </el-carousel>
		  </el-col>
		  <el-col :span="8">
				<month-business-view/>
		  </el-col>
		  <el-col :span="8" :style="rateStyle()">
				<check-rate-View v-if="getQueryVariable('rate')"/>
				<msg v-else/>
			</el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="14">
				<today-check-view/>
			</el-col>
		  <el-col :span="10">
				<notice-view/>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	
	import store from '@/store'
	import itemView from './viewmodules/item'
	import BaseCountView from './viewmodules/basecount'
	import ProductClazzView from './viewmodules/productclazz'
	import MonthBusinessView from './viewmodules/monthbusiness'
	import CheckRateView from './viewmodules/checkrate'
	import TodayCheckView from './viewmodules/todaycheck'
	import NoticeView from './viewmodules/notice'
	
	import { visit } from '@/api/tables'
	
	/**
	 * 退回信息
	 */
	import Msg from '@/views/common/home/components/Msg'
	
	export default {
	  data() {
	    return {
				currentUser:store.getters.userInfo
				
		}
		},
		components:{
			itemView,
			BaseCountView,
			ProductClazzView,
			MonthBusinessView,
			CheckRateView,
			TodayCheckView,
			NoticeView,
			Msg
		},
	  mounted() {
	  	visit("大屏").then().catch()
	  },
	  methods:{
			rateStyle(){
				if(this.getQueryVariable('rate')){
					return ""
				}else{
					return "height: 32rem;overflow-y:auto;"
				}
			},
		  getQueryVariable(variable){
			   var query = window.location.search.substring(1);
			      var vars = query.split("&");
			      for (var i=0;i<vars.length;i++) {
			          var pair = vars[i].split("=");
			          if(pair[0] == variable){return pair[1];}
			      }
			      return(false);
		  }
	  }
	}
</script>

<style>
	  
	  .el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
</style>